<template>
  <div>
    <layout-compo>
      <template v-slot:title>人均搜索次数</template>
      <template v-slot:header_num>2.7</template>

      <template v-slot:chart>
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div ref="echart" class="chart"></div>
      </template>
    </layout-compo>
  </div>
</template>

<script>
import echarts from "echarts";
import LayoutCompo from "./search_compo/LayoutCompo.vue";

export default {
  components: {
    LayoutCompo,
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      var myChart = echarts.init(this.$refs.echart);
      var option = {
        xAxis: {
          show: false,
          type: "category",
          boundaryGap: false,
          data: [
            "6月2号",
            "6月3号",
            "6月4号",
            "6月5号",
            "6月6号",
            "6月7号",
            "6月8号",
          ],
        },
        yAxis: {
          show: false,
        },
        series: [
          {
            type: "line",
            data: [106, 90, 35, 70, 69, 30, 142],
            symbol: "none", //去掉折线图中的节点
            smooth: true, //true 为平滑曲线，false为直线
            // line
            lineStyle: {
              color: "rgb(90, 90, 255)",
            },
            // area
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(55, 162, 255)",
                },
                {
                  offset: 1,
                  color: "#fff",
                },
              ]),
            },
          },
        ],
        // tips
        tooltip: {},
        // layout test
        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
        },
      };
      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: 60px;
}
</style>